<template>
	<view>
		<view class="wanl-product">
			<view class="product_warter" :class="dataStyle"
				v-if="dataStyle == 'col-2-10' || dataStyle == 'col-2-15' || dataStyle == 'col-2-20' || dataStyle == 'col-2-25' || dataStyle == 'col-2-30'">
				<view class="wanl-waterfall">
					<view id="wanl-left-cloumn" class="wanl-cloumn">
						<view class="warter left" v-for="(item, index) in leftList" :key="index">
							<view class="img-wrap padding-sm flex justify-center" @tap="handleShop(item.id)">
								<image class="image" :src="item.avatar" mode="aspectFill" style="height: 200rpx;"></image>
							</view>
							<view class="content padding-sm">
								<view class="flex justify-between align-center">
									<view class="margin-right-sm"  @tap="handleShop(item.id)">
										<text class="text-df text-gray-dark text-bold">{{item.shopname}}</text>
									</view>
									<view class="tag" v-if="item.isLive" @tap="handleLive(item.isLive.id)">
										<text class="wlIcon-zhibo text-white"></text>
										<text class="tag-text">直播中</text>
									</view>
								</view>
								<view class="flex align-center padding-tb-sm">
								<text v-for="i in bussinfoList" v-if="item.type === i.id" class="padding-tb-s padding-lr-xs radius bg-blue text-white text-xs">{{i.name}}</text>
			<!-- 						<text v-if="item.type === 2" class="padding-tb-s padding-lr-xs radius bg-yellow text-white text-xs">外卖</text>
									<text v-if="item.type === 3" class="padding-tb-s padding-lr-xs radius bg-blue text-white text-xs">甜品饮料</text>
									<text v-if="item.type === 4" class="padding-tb-s padding-lr-xs radius bg-red text-white text-xs">休闲娱乐</text> -->
								</view>
								<view class="flex align-center justify-between">
									<text class="text-xs">营业时间:{{item.biz_time}}</text>
									<text class="wlIcon-dianhua" @tap.stop="callPhone(item.user.mobile)"></text>
								</view>
								<view class="flex align-center justify-between text-gray">
									<view class="">
										<text class="text-xs">{{ item.address !== '' ? item.address : '地址' }}</text>
									</view>
									<view class="" v-if="item.newDistance">
										<text class="wlIcon-weizhi text-xs"></text>
										<text class="text-xs">{{ distance(item.newDistance) }}{{item.newDistance > 1000 ? 'km' : 'm'}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view id="wanl-right-cloumn" class="wanl-cloumn">
						<view class="warter right" v-for="(item, index) in rightList" :key="index">
							<view class="img-wrap padding-sm flex justify-center"  @tap="handleShop(item.id)">
								<image class="image" :src="item.avatar" mode="aspectFill" style="height: 200rpx;"></image>
							</view>
							<view class="content padding-sm">
								
								<view class="flex justify-between align-center">
									<view class="margin-right-sm"  @tap="handleShop(item.id)">
										<text class="text-df text-gray-dark text-bold">{{item.shopname}}</text>
									</view>
									<view class="tag" v-if="item.isLive" @tap="handleLive(item.isLive.id)">
										<text class="wlIcon-zhibo text-white"></text>
										<text class="tag-text">直播中</text>
									</view>
								</view>
								
								<view class="flex align-center padding-tb-sm">
									<text v-for="i in bussinfoList" v-if="item.type === i.id" class="padding-tb-s padding-lr-xs radius bg-blue text-white text-xs">{{i.name}}</text>
									<!-- <text v-if="item.type === 2" class="padding-tb-s padding-lr-xs radius bg-yellow text-white text-xs">外卖</text>
									<text v-if="item.type === 3" class="padding-tb-s padding-lr-xs radius bg-blue text-white text-xs">甜品饮料</text>
									<text v-if="item.type === 4" class="padding-tb-s padding-lr-xs radius bg-red text-white text-xs">休闲娱乐</text> -->
								</view>
								<view class="flex align-center justify-between">
									<text class="text-xs">营业时间:{{item.biz_time}}</text>
									<text class="wlIcon-dianhua" @tap.stop="callPhone(item.user.mobile)"></text>
								</view>
								<view class="flex align-center justify-between text-gray">
									<view class="">
										<text class="text-xs">{{ item.address !== '' ? item.address : '地址' }}</text>
									</view>
									<view class="" v-if="item.newDistance">
										<text class="wlIcon-weizhi text-xs"></text>
										<text class="text-xs">{{ distance(item.newDistance) }}{{item.newDistance > 1000 ? 'km' : 'm'}}</text>
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
			<!-- 普通布局 -->
			<view class="product_list" :class="dataStyle" v-else>
				<view class="item" v-for="(item, index) in copyFlowList" :key="item.shopname" @tap="handleShop(item.id)">
					<view class="img-wrap">
						<image :src="$wanlshop.oss(item.avatar, 125, 125)" mode="aspectFill"></image>
					</view>
					<view class="content padding-sm">
						<view class="">
							<view class="text-cut-2">
								<text>{{ item.shopname }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * wanlBusiness 门店
	 * @description 商品组件 深圳前海万联科技有限公司 https://www.wanlshop.com（除万联官方内嵌系统，未经授权严禁使用）
	 * @著作权：WanlShop 登记号：2020SR0255711 版本：V1.0.0
	 * @property {Array} dataList 列表数据
	 * @property {String} dataStyle 列表样式
	 * @example <wanl-business />
	 */
	export default {
		name: 'wanlBusiness',
		props: {
			dataList: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			dataStyle: {
				type: String,
				default: 'col-2-20'
			}
		},
		data() {
			return {
				addTime: 180,
				leftList: [],
				rightList: [],
				tempList: [],
				children: [],
				bussinfoList:[]
			
			}
		},
		watch: {
			copyFlowList(nVal, oVal) {
				// 取差值，即这一次数组变化新增的部分

				if(nVal[0].type == oVal[0].type){
					let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
					if (nVal.slice(startIndex).length == 0) {
						this.leftList = [];
						this.rightList = [];
						this.tempList = this.cloneData(this.copyFlowList);
					}else{
						this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
					}
				}else{
					this.leftList = [];
					this.rightList = [];
					this.tempList = this.cloneData(this.copyFlowList);
				}
				
				this.splitData();
			},
		},
		mounted() {
			this.tempList = this.cloneData(this.copyFlowList);
			this.splitData();
			uni.request({
				url:"/wanlshop/bussinfo/getBussinfoList",
				method:"POST",
				success:(res)=>{
					this.bussinfoList = res.data;
					console.log(this.bussinfoList);
				}
			})
			
			
		},
		computed: {
			// 破坏flowList变量的引用，否则watch的结果新旧值是一样的
			copyFlowList() {
				return [...this.cloneData(this.dataList)]; 
			}
			
		},
		methods: {		
			//保留一位小数
			distance(value){
				console.log(value)
				if(value > 1000){
					return parseFloat(value/1000).toFixed(1);
				} else{
					return parseFloat(value).toFixed(1);
				}
				
			},
			async splitData() {
				if (!this.tempList.length) return;
	
				console.log(this.tempList);
				// 如果左边小于或等于右边，就添加到左边，否则添加到右边
				let item = this.tempList[0];
				if(!item) return ;
				item.avatar = this.$wanlshop.oss(item.avatar, 172, 0, 1);
				item.comment = this.$wanlshop.toFormat(item.comment, 'hundred');
				item.praise = item.comment > 0 ? parseInt((item.praise / item.comment) * 100) : 0;

				
				console.log(this.leftList);
				console.log(this.rightList);
				console.log("000000000000");
				
				// 这里是为了保证第一和第二张添加时，左右都能有内容
				// 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
				if (this.leftList.length <= this.rightList.length) {
					console.log("left");
					console.log(item);
					this.leftList.push(item);
				} else {
					console.log("right");
					console.log(item);
					this.rightList.push(item);
				}
				
				
				// 移除临时列表的第一项
				this.tempList.splice(0, 1);
				// 如果临时数组还有数据，继续循环
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime)
				}
			},
			// 复制而不是引用对象和数组
			cloneData(data) {
				return JSON.parse(JSON.stringify(data));
			},
			
			handleShop(id) {
				//this.$wanlshop.to(`/pages/shop/index?id=${id}`);
				this.$wanlshop.to(`/pages/shop/product/list?shop_id=${id}`);
			},
			callPhone(phoneNumber) {
				uni.makePhoneCall({
				  phoneNumber: phoneNumber, // 电话号码
				  success: function () {
				    console.log('拨打电话成功');
				  },
				  fail: function () {
				    console.log('拨打电话失败');
				  }
				});
			},
			
			handleLive(id){
				if(this.$store.state.user.isLogin){
					uni.navigateTo({
						url: `/pages/apps/find/details/live?id=${id}`
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/auth/auth'
					})
				}
			},
		
		}
	};
</script>

<style lang="scss" scoped>
	.wanl-waterfall {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		.wanl-cloumn {
			display: flex;
			flex: 1;
			flex-direction: column;
			height: auto;
			width: 50%;
			.wanl-image {
				width: 100%;
			}
		}
	}
	.tag {
		height: 15px;
		display: inline-flex;
		align-items: center;
		flex-direction: row;
		padding: 0 4px;
		background-image: linear-gradient(-90deg, #ff4950, #ff8123);
		border-radius: 5px;
		margin-right: 5px;
		
	}
	.tag-text {
	    font-size: 10px;
	    color: #ffffff;
	}
</style>
